import React, { useState } from "react";
import { Button, Layout, Tooltip } from "antd";
import Cookie from "js-cookie";
import { ReactComponent as UserIcon } from "../../assets/icon/用户.svg";
import { useNavigate } from "react-router-dom";
import HeadStyle from './headrt.module.css'
import styled from 'styled-components';
const { Header } = Layout;
const CustomTooltip = styled(Tooltip)`
  .ant-tooltip-inner {
    background-color: #f00 !important; /* 修改为你想要的背景颜色，并使用 !important 提高优先级 */
    color: #333 !important; /* 修改文本颜色，确保在新背景颜色上可读 */
  }

  .ant-tooltip-arrow {
    border-color: #f0f0f0 !important; /* 修改箭头颜色，并使用 !important 提高优先级 */
  }
`;
function HeaderComponent() {
  const navigate = useNavigate();
  const [username, setUsername] = useState(
    localStorage.getItem("users") ? localStorage.getItem("users") : ""
  );
  return (
    <Header
      style={{
        background: "white",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        color: "#000",
        borderBottom: "1px solid #ccc",
      }}
    >
      <p style={{ color: "black", fontWeight: "bold" }}>
        于海至 欢迎你的到来！
      </p>
      <CustomTooltip title={
        <div className={HeadStyle.Head_user}>
          <Button style={{color:"white",background:"transparent", border:"none",margin:"3px 0"}}>修改密码</Button>
          <Button style={{color:"white",background:"transparent", border:"none",margin:"3px 0"}}>个人信息</Button>
          <Button style={{color:"white",background:"transparent", border:"none",margin:"3px 0"}}>退出登录</Button>
        </div>
      }>
        <p
          style={{
            height: "30%",
            display: "flex",
            alignItems: "center",
            padding: "0",
            cursor:"pointer"
          }}
        >
          <UserIcon width={25} />
          <span style={{ margin: "0 3px" }}>于海至</span>
        </p>
      </CustomTooltip>
  
    </Header>
  );
}

export default HeaderComponent;
